<template>
  <div id="header">
    <van-row gutter="20">
      <van-col span="8">
        <van-icon name="arrow-left" @click="lastOne" />
      </van-col>
      <van-col span="8" style="font-size: 4.3vw"
        ><p style="text-align: center">收藏夹</p></van-col
      >
      <van-col span="8">
        <van-popover v-model:show="showPopover" :actions="actions">
          <template #reference>
            <van-button type="primary">
              <van-icon name="wap-nav" style="margin-left: 16vw" />
            </van-button>
          </template>
        </van-popover>
      </van-col>
    </van-row>
  </div>
  <div id="mainbox">
    <div class="main">
      <van-tabs v-model:active="active" type="card">
        <van-tab title="团购（0）" title-style="width:100%"></van-tab>
        <van-tab title="商家（0）" title-style="width:100%"></van-tab>
      </van-tabs>
    </div>
  </div>
  <div class="mainimg">
    <img
      src="https://p0.meituan.net/travelcube/7abc4de567fc8e325c86033257c8113a20460.png"
      alt=""
    />
    <p>你没有任何操作，赶紧去逛逛吧</p>
  </div>
  <div id="footer">
    <span @click="flag = !flag"
      >城市:<van-icon name="location" style="color: rgb(255, 195, 0)" /></span
    ><span v-show="cityFlag"> {{ arrData }}</span>
    <div class="footer1">
      <van-row :wrap="false">
        <van-col @click="toHome">首页</van-col>|
        <van-col @click="toDownload">美团下载</van-col>|
        <van-col @click="toHome">电脑版</van-col>|
        <van-col @click="help">帮助</van-col>|
        <van-col @click="exit">退出</van-col>
      </van-row>
    </div>
    <div class="footer2">
      <van-row justify="center" style="font-size: 3.2vw">
        <van-col span="4">友情链接:</van-col>
        <van-col span="4">
          <a href="https://m.maoyan.com/?channel=touch_group#movie"
            >猫眼电影</a
          ></van-col
        >
        <van-col span="4">
          <a href="https://m.dianping.com/">大众点评</a></van-col
        >
        <van-col span="4">
          <a
            href="https://i.meituan.com/awp/hfe/hotel-fe-itower_awp/journey/guide-download/index.html?refer_source=yql"
            >美团旅行</a
          ></van-col
        >
        <van-col span="4">
          <a href="https://minsu.dianping.com/?domain_type=i"
            >榛果民宿</a
          ></van-col
        >
        <van-col span="6">
          <a href="https://evt.dianping.com/synthesislink/9496.html"
            >大众点评下载</a
          ></van-col
        >
        <van-col span="6">
          <a href="https://rms.meituan.com/">美团餐饮系统</a></van-col
        >
        <van-col span="6">
          <a href="https://xue.meituan.com/?from=mt0">美团餐饮培训</a></van-col
        >
        <van-col span="8">
          <a href="https://www.kuailvzaixian.com/">快驴进货商家合作</a></van-col
        >
        <van-col span="8">
          <a href="https://123.meituan.com/v3?source=mtwib/"
            >商机/招聘</a
          ></van-col
        >
      </van-row>
    </div>
  </div>
  <van-area
    title="标题"
    :area-list="areaList"
    v-show="flag"
    @confirm="confirm"
    @cancel="cancel"
  />
  <van-divider
    :style="{
      color: '#999',
      borderColor: '#999',
      margin: '0',
      fontSize: ' 2vw'
    }"
  >
    ©2022 美团网 京ICP证070791号
  </van-divider>
</template>
<script>
import { defineComponent } from 'vue'
import { areaList } from '@vant/area-data'
import { createApp } from 'vue'
import { Tab, Tabs } from 'vant'

const app = createApp()
app.use(Tab)
app.use(Tabs)

export default defineComponent({
  created() {
    this.name = localStorage.getItem('adminname')
  },
  setup() {
    return { areaList }
  },
  data() {
    return {
      arrData: [],
      flag: false,
      cityFlag: false,
      showPopover: false,
      actions: [{ text: '首页' }, { text: '我的' }, { text: '搜索' }],
      number: 0
    }
  },
  methods: {
    help() {
      this.$router.push('/help')
    },
    confirm(val) {
      this.arrData = val[0].name + '-' + val[1].name + '-' + val[2].name
      this.flag = false
      this.cityFlag = true
    },
    cancel() {
      this.flag = false
    },
    exit() {
      localStorage.removeItem('vuex')
      localStorage.removeItem('adminname')
      this.$router.push('/login')
    },
    lastOne() {
      this.$router.go(-1)
    },
    toHome() {
      this.$router.push('/')
    },
    toDownload() {
      this.$router.push('/download')
    }
  }
})
</script>

<style lang="scss" scoped>
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
#header {
  height: 13.3vw;
  background: linear-gradient(135deg, #ffd000, #ffbd00);
  font-size: 6.4vw;
  line-height: 13.3vw;
  padding: 0 4vw;
}
.van-button {
  background: none;
  border: none;
  color: black;
}
.van-icon-wap-nav {
  font-size: 6.4vw;
}
button {
  position: relative;
  top: -2vw;
}
#mainbox {
  margin: 0.14rem 0.1rem;
  .main {
    width: 100%;
    display: flex;
    .main1 {
      flex: 1;
      text-align: center;
      line-height: 0.3rem;
      font-size: 0.16rem;
    }
    .main2 {
      flex: 1;
      text-align: center;
      line-height: 0.3rem;
      font-size: 0.14rem;
    }
  }
}
.mainimg {
  height: 1.4rem;
  padding: 0.9rem 0;
  text-align: center;
  img {
    height: 100%;
    display: block;
    width: 1.6rem;
    margin: 0 auto;
  }
  p {
    padding-top: 0.25rem;
  }
}
#footer {
  padding: 4vw 6.7vw 0 6.7vw;
  font-size: 3.5vw;

  span:nth-child(1) {
    color: #999;
  }
  .footer1 {
    margin-top: 6.7vw;

    .van-col {
      width: 20vw;
      color: #fe8c00;
      text-align: center;
      margin: 0;
    }
  }
  .footer2 {
    text-align: center;
    margin-top: 4vw;
    line-height: 6vw;
    font-size: 2vw;
    .van-col {
      margin: 0 1vw;
      a {
        text-decoration: none;
        color: #646464;
      }
    }
  }
}
.footer3 {
  font-size: 2vw;
  width: 100%;
  text-align: center;
  color: #999;
  margin-top: 2vw;
}
.van-area {
  position: fixed;
  width: 100%;
  bottom: 0;
}
.main div {
  flex: 1;
}
</style>
